<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <base href="/mvc/"/>
    <!--引入axios和vue-->
    <script src="script/vue.js"></script>
    <script src="script/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="sendCommon()">发送param请求~普通参数</button><br/>
    <button @click="sendJsonBody()">发送data请求~json参数</button>
</div>
<script>
    var vue = new Vue({
        "el":"#app",
        "methods":{
            //发送异步请求携带普通类型的请求参数
            sendCommon(){
                axios({
                    "method":"POST",
                    "url":"ajax/commonParameter",
                    //params表示携带普通类型的参数
                    "params":{
                        "userName":"tom",
                        "password":"123456"
                    }
                }).then(response => {
                    console.log(response.data.movieName)
                })
            },
            sendJsonBody(){
                axios({
                    "method":"POST",
                    "url":"ajax/jsonBodyParameter",
                    //data表示携带json请求体类型的参数
                    "data":{
                        "userName":"tom",
                        "password":"123456"
                    }
                }).then(response => {
                    console.log(response.data.movieName)
                })
            }
        }
    });
</script>
</body>
</html>